<template>
	<view class="publishProduct">
		<u-form :model="form" ref="form1" class="formBox">
			<!-- 商品规格 商品品牌 -->
			<view class="formBox1 formTop">

				<u-form-item label=" " prop="name">

					<view class="f28 c3d">
						模板名称 <text class="error ml8">*</text>
					</view>
					<view class="ml12 flex1">
						<u-input v-model="form.name" placeholder="请输入模板名称" />
					</view>
				</u-form-item>
				<u-form-item label=" " prop="select1">
					<view class="f28 c3d wsn">
						发货时间 <text class="error ml8">*</text>
					</view>
					<view class="flex1">
						<view class="ml24">
							<u-input v-model="selectList.current1.label" type="select" placeholder="请选择发货时间"
								@click="btnInputSelect(1)" />
						</view>
					</view>
				</u-form-item>
				<u-form-item label=" " prop="">
					<view class="f28 c3d wsn ">
						包邮类型
						<text class="error ml8">*</text>
					</view>
					<view class="flex1 ml24">
						<u-radio-group v-model="form.radio">
							<u-radio name='1'>卖家包邮</u-radio>
							<u-radio name='0'>自定义运费</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<view class="" v-if="form.radio==0">
					<view class="f28 c3d wsn mt24">
						计价方式 <text class="error ml8">*</text>
					</view>
					<u-form-item label=" ">
						<view class="flex1">
							<u-radio-group v-model="form.radio1" @change="btnRadio">
								<u-radio name='0'>按件数</u-radio>

							</u-radio-group>
						</view>
					</u-form-item>
				</view>

			</view>

			<view v-for="(item,index) in list" :key='index' class="formBox1 formImg mt20" v-if="form.radio == 0">
				<view class="c3d f32 fb">
					配送名称{{index+1}}
				</view>
				<view class="">
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							配送名称 <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.name" placeholder="请输入配送名称" />
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							配送区域 <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.citysName" type="select" @click="btnInputSelect('psqy',index)"
									placeholder="请选择配送区域" />
							</view>
						</view>

					</u-form-item>
					<view class="provinceNameBox">
						<view class="flex flex_warp" v-for="(item,indx2) in item.provinceName" :key="indx2">
							{{item.name}}(
							<view class="nameTitle" v-for="(item1,indx3) in item.nameCity" :key="indx3">
								{{item1.name}},
							</view>
							)
						</view>
					</view>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							{{listTitle.name1}} <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.first" :placeholder="'请输入' + listTitle.name1" />
							</view>
						</view>
						<view class="">
							{{listTitle.unit1}}
						</view>
					</u-form-item>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							{{listTitle.name2}} <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.first_fee" :placeholder="'请输入' + listTitle.name2" />
							</view>
						</view>
						<view class="">
							{{listTitle.unit2}}
						</view>
					</u-form-item>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							{{listTitle.name3}} <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.additional" :placeholder="'请输入' + listTitle.name3" />
							</view>
						</view>
						<view class="">
							{{listTitle.unit3}}
						</view>
					</u-form-item>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							{{listTitle.name4}} <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.additional_fee" :placeholder="'请输入' + listTitle.name4" />
							</view>
						</view>
						<view class="">
							{{listTitle.unit4}}
						</view>
					</u-form-item>
					<view @click="btnDelete(item,index)" class="mt12 tar primary">
						删除
					</view>
				</view>
			</view>
			<view class="flexRight pb32" v-if="form.radio==0">
				<view class="sqpp" @click="btns('add')">
					添加运费数据
				</view>
			</view>
		</u-form>
		<u-select child-name='childlist' :mode='selectList.mode' value-name='id' label-name='name'
			v-model="selectList.show" :list="selectList.list" @confirm="onSelect"></u-select>
		<!-- 地图选择 -  -->
		<view class="areaBox1">
			<u-popup v-model="areaShow" mode="bottom" border-radius="28" height='80%'>
				<view class="flex areaBox2">
					<view class="left">

						<scroll-view scroll-y="true" class="scroll-view">
							<u-checkbox-group v-model="areaProvince">
								<view v-for="(item,index) in areaData" :key="index" class="item-box">
									<u-checkbox @change="changeCheckbox0($event,index,item)" v-model="item.checked"
										:name="item.id">
										{{item.name}}
									</u-checkbox>
								</view>
							</u-checkbox-group>
						</scroll-view>
					</view>
					<view class="right">
						<scroll-view scroll-y="true" class="scroll-view">
							<u-checkbox-group v-model="areaCity">
								<view v-for="(item,index) in areaDataCity" :key="index" class="item-box">
									<u-checkbox @change="changeCheckbox1($event,index,item)" v-model="item.checked"
										:name="item.id">
										{{item.name}}
									</u-checkbox>
								</view>
							</u-checkbox-group>
						</scroll-view>
					</view>
				</view>
			</u-popup>
		</view>

		<view class="btnSub mt20">
			<button class="btn" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				areaDataCity: [],
				areaProvince: [],
				areaProvinceIndex: 0,
				areaCity: [],
				list: [{
					first: '',
					first_fee: '',
					additional: '',
					additional_fee: '',
					name: '',
					province: [],
					citys: [],
					provinceName: [],
					citysName: '',
				}],
				listTitle: {
					name1: '首件',
					name2: '运费',
					name3: '续件',
					name4: '续费',
					unit1: '个',
					unit2: '元',
					unit3: '个',
					unit4: '元',
				},
				// 筛选数组数据
				selectList: {
					// "single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式
					mode: '',
					selectIndex: '',
					list: [{

					}],
					current1: {
						label: ''
					},

					show: false,
				},
				// 表单数据
				form: {
					name: '',
					radio: '0',
					radio1: '0',
					select1: '',
					select2: '',

					text: '',
				},
				// 校验
				rules: {
					name: [{
						required: true,
						message: '请填写商品标题',
						trigger: ['change', 'blur'],
					}],
					select1: [{
						required: true,
						message: '请选择商品类目',
					}],

					img1: [{
						required: true,
						message: '请上传商品主图',
						trigger: ['change', 'blur'],
					}],
					text: [{
						required: true,
						message: '请输入商品描述',
						trigger: ['change', 'blur'],
					}],

				},
				// 上传图片
				uploadurl: null,
				multipart: null,
				clearIcon: 'https://img.aibbyp.com/wechat/images/nHome/close.png',
				selectfile: 'https://img.aibbyp.com/wechat/images/nHome/tpsc.png',

				areaData: [],
				areaShow: false,
				areaIndex: 0,
				editId: '',
			}
		},

		onLoad(data) {
			if (data.id) {
				this.getList(data.id)
				this.editId = data.id
			} else {
				this.getArea()
			}
			this.getDeliveryList()

		},
		onShow() {

		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			// 点击省
			changeCheckbox0(event, index, item) {
				// event -- 选中值, index -- 索引, item -- 对象数据
				this.areaProvinceIndex = index
				this.areaDataCity = item.city
				let list = this.list[this.areaIndex]
				list.province = this.areaProvince
				if (event.value) { //选中
					// 如果没有当前省 就添加进去
					if (list.province.includes(event.name) == false) {
						list.province.push(event.name)
					}
					// 选中省以后 选中下面所有的市 
					this.areaDataCity.forEach(a => {
						if (list.citys.includes(a.id) == false) {
							list.citys.push(a.id)
						}
						a.checked = true
					})
				} else { //取消选中

					// 删除所有市id
					this.areaDataCity.forEach(a => {
						a.checked = false
						for (let u in list.citys) {
							if (list.citys[u] == a.id) {
								list.citys.splice(u, 1)
							}
						}
					})
					// 删除当前省id
					list.province.splice(list.province.indexOf(event.name), 1)

				}

				if (list.province.length == 0) {
					list.provinceName = []
				} else {
					this.getCityName()
				}
			},
			// 点击市
			changeCheckbox1(event, index, item) {
				// event -- 选中值, index -- 索引, item -- 对象数据
				console.log(event, index, item);
				let list = this.list[this.areaIndex]
				// 上级id （省id）
				let provinceId = this.areaData[this.areaProvinceIndex].id
				console.log(provinceId);
				if (event.value) { //选中
					// 如果没有省 -- > 添加进去
					if (list.province.includes(provinceId) == false) {
						list.province.push(provinceId)
						this.areaData[this.areaProvinceIndex].checked = true
					}

					if (list.citys.includes(event.name) == false) {
						list.citys.push(event.name)
					}

				} else {
					if (list.citys.includes(event.name) != false) {
						list.citys.splice(list.citys.indexOf(event.name), 1)
					}
					let idTure
					let cityIds = this.areaDataCity.map(a => a.id)
					for (let i of list.citys) {
						if (cityIds.includes(i) == false) {
							idTure = false
						} else {
							idTure = true
						}
					}
					if (idTure == false) {
						list.province.splice(list.province.indexOf(provinceId), 1)
						this.areaData[this.areaProvinceIndex].checked = false
					}
				}
				console.log(list.province);
				console.log(list.citys);
				if (list.province.length == 0) {
					list.provinceName = []
				} else {
					this.getCityName()
				}
			},
			getList(id) {
				this.$api.get({
					url: '/store.Logistics/FreightDetail?id=' + id
				}).then(res => {
					res.freightdata.forEach(a => {
						a.citys = a.citys.map(Number)
						a.province = a.province.map(Number)
						a.provinceName = []
						a.citysName = ''
					})
					let data = []
					this.list = res.freightdata.length == 0 ? this.list : res.freightdata
					console.log('xxx',this.list);
					this.form.name = res.name
					this.form.select1 = res.delivery
					this.selectList.current1.label = res.delivery_text
					this.form.radio = res.isdelivery
					this.form.radio1 = res.valuation
					this.getArea('onload')
				})
			},
			// 计价方式选择 -- 修改单位
			btnRadio(i) {
				console.log(i);
				if (i == '0') {
					this.listTitle = {
						name1: '首件',
						name2: '运费',
						name3: '续件',
						name4: '续费',
						unit1: '个',
						unit2: '元',
						unit3: '个',
						unit4: '元',
					}
					return
				}
				if (i == '1') {
					this.listTitle = {
						name1: '首重',
						name2: '运费',
						name3: '续重',
						name4: '续费',
						unit1: '千克',
						unit2: '元',
						unit3: '千克',
						unit4: '元',
					}
					return
				}
				if (i == '2') {
					this.listTitle = {
						name1: '首面积',
						name2: '运费',
						name3: '续面积',
						name4: '续费',
						unit1: '立方米',
						unit2: '元',
						unit3: '立方米',
						unit4: '元',
					}
					return
				}
				if (i == '3') {
					this.listTitle = {
						name1: '首距离',
						name2: '运费',
						name3: '续距离',
						name4: '续费',
						unit1: '千克',
						unit2: '元',
						unit3: '千克',
						unit4: '元',
					}
					return
				}
			},
			// 提交信息
			submit() {
				this.$refs.form1.validate(valid => {
					console.log(valid, this.form);
					if (valid) {
						// 卖家包邮
						let data = {
							name: this.form.name,
							delivery: this.form.select1,
							isdelivery: this.form.radio
						}

						if (this.form.radio == 0) {
							data.valuation = this.form.radio1
							data.rule = []
							this.list.forEach(a => {
								console.log(a);
								data.rule.push({
									name: a.name,
									province: a.province.toString(),
									citys: a.citys.toString(),
									first: a.first,
									first_fee: a.first_fee,
									additional: a.additional,
									additional_fee: a.additional_fee,
								})
							})
							// 校验数信息是否填写完整
							for (let item of data.rule) {
								for (let item1 in item) {
									if (item[item1] == '' || item[item1] == null || item[item1] == undefined) {
										uni.showToast({
											title: '请完整输入运费数据',
											icon: 'none'
										})
										return
									}
								}
							}
						}
						console.log(data);
						uni.showLoading({
							title: '提交中...'
						})
						let url = '/store.Logistics/FreightAdd'
						if (this.editId) {
							url = '/store.Logistics/FreightEdit'
							data.id = this.editId
						}
						this.$api.post({
							url: url,
							data: data,
							success: res => {
								uni.hideLoading()
								uni.showToast({
									title: '提交成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							},
							

						})

					} else {
						console.log('验证失败');
					}
				});
			},
			// 多选 父级 i:选中的数据源{name: 1，value: true} k:areaData索引的
			// 根据城市 返回城市名字
			getCityName() {
				console.log('反选 城市名字');
				this.list[this.areaIndex].provinceName = []
				this.areaData.forEach((a, k) => {
					for (let b of this.list[this.areaIndex].province) {
						let names = this.list[this.areaIndex].provinceName // ['xxx','xxx']
						if (a.id == b) {
							let names11 = {
								name: a.name,
								id: a.id,
								nameCity: [],
							}
							a.city.forEach((a1, k1) => {
								for (let b1 of this.list[this.areaIndex].citys) {
									if (a1.id == b1) {
										names11.nameCity.push({
											name: a1.name,
											id: a1.id
										})
									}
								}
							})
							names.push(names11)
							console.log(names, 'x');
						}

					}
				})
				this.list[this.areaIndex].citysName = '已选择'
				uni.hideLoading()
			},
			// 获取地址信息
			getArea(type) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.get({
					url: '/wanlshop/common/area',
					success: res => {
						res.forEach(a => {
							a.checked = false
							a.city.forEach(b => {
								b.checked = false
							})
						})
						this.areaData = res
						if (type) {
							for (let s1 in this.list) {
								this.areaIndex = s1
								this.getCityName()
							}
						}

						uni.hideLoading()
						this.areaDataCity = res[0].city
					},
					fail: error => {
						uni.hideLoading()
					}
				})

			},
			// 运费数据删除
			btnDelete(i, k) {
				if (this.list.length == 1) {
					uni.showToast({
						title: '运费数据最少有一个',
						icon: 'none'
					})
					return
				} else {
					this.list.splice(k, 1)
				}
			},
			// 按钮添加
			btns(i) {
				this.list.push({
					jjfs: '',
					name: '',
					province: [],
					citys: [],
					sj: '',
					fw: '',
					xj: '',
					xf: '',
				})
			},
			// 点击输入框 显示选择框
			btnInputSelect(index, index1) {
				console.log(index, index1);
				this.selectList.selectIndex = index
				if (index == 1 || index == 2) {
					this.selectList.mode = 'single-column'
					this.selectList.show = true
				}

				if (index == 'psqy') {
					uni.showLoading({
						title: '加载中...'
					})
					this.areaIndex = index1
					// 删除所有已选的数据  反选当前选中的数据
					this.areaData.forEach((a, k) => {
						a.checked = false
						for (let l of this.list[this.areaIndex].province) {
							if (a.id == l) {
								a.checked = true
							}
						}
						a.city.forEach((a1, k1) => {
							a1.checked = false
							for (let l1 of this.list[this.areaIndex].citys) {
								if (a1.id == l1) {
									a1.checked = true
								}
							}
						})
					})
					this.areaShow = true

					this.$nextTick(() => {
						setTimeout(() => {
							uni.hideLoading()
						}, 300)
					})

				}

			},
			// 确定选择
			onSelect(arr) {
				console.log(arr);
				let current = arr[0];
				if (this.selectList.selectIndex == 1) {
					this.form.select1 = current.value;
					this.selectList.current1 = current;
					return
				}

				if (this.selectList.selectIndex == 3) {
					this.form.select3 = current.value;
					this.selectList.current3 = current;
					return
				}



			},
			// 发货时间列表
			getDeliveryList() {

				this.$api.post({
					url: '/store.Logistics/deliveryList',
					success: res => {
						this.selectList.list = []
						for (let i in res) {
							this.selectList.list.push({
								name: res[i],
								id: i
							})
						}

						this.form.select1 = this.selectList.list[1].id
						this.selectList.current1.label = this.selectList.list[1].name
					},

				})
			},



		}
	}
</script>

<style lang="scss" scoped>
	.areaBox1 {
		display: flex;

		.areaBox2 {
			height: 100%;
			overflow-y: hidden;

			.scroll-view {
				height: 100%;
			}

			::v-deep.u-checkbox {
				align-items: start;

				.u-checkbox__icon-wrap {
					margin-top: 10rpx;
				}
			}

			.left {
				background: #F7F7F7;
				width: 230rpx;
				padding: 20rpx;
				height: 100%;

				.item-box {
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
			}

			.right {
				padding: 20rpx 30rpx;
				flex: 1;
				height: 100%;

				.item-box {
					margin-bottom: 28rpx;
					width: 100%;
				}
			}
		}


	}

	.publishProduct {
		width: 100%;
		padding-bottom: 100rpx;

		.provinceNameBox {
			margin-left: 150rpx;

			.nameTitle {
				color: #2f94ff;
			}
		}

		.areaBox {
			padding: 12rpx 24rpx;

			.titleCheckbox {
				width: 640rpx;
			}

			.areaBox1 {
				padding: 0 24rpx;
			}
		}

		.formBox {
			.formBox1 {
				padding: 32rpx 32rpx;
				background: #fff;
			}

			.formImg {
				padding: 24rpx 32rpx;
			}


			::v-deep.u-form-item--left {
				display: none;
			}

			::v-deep.u-form-item--right__content__slot {
				display: flex !important;
				flex: 1;
			}

			.imgBox {
				width: 100%;
				flex-wrap: wrap;
			}

			.box-mode {
				width: 132rpx;
				height: 132rpx;
			}

			.full {
				width: 100%;
				height: 100%;

			}

			.imgs {
				border-radius: 10rpx;
				border: 1rpx dashed #ccc;
			}



			.show-box {
				position: relative;
				margin-bottom: 6rpx;
				margin-right: 6rpx;
				width: 132rpx;
				height: 132rpx;

				.delect-icon {
					height: 40rpx;
					width: 40rpx;
					position: absolute;
					right: 0rpx;
					top: -6rpx;
					z-index: 1;
				}
			}

			.flexRight {
				display: flex;
				flex-direction: row-reverse;
				margin-top: 24rpx;
				padding-right: 24rpx;

				.sqpp {
					color: #FFFFFF;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 52rpx;
					width: 180rpx;
					height: 52rpx;
					background: #3065FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

				}
			}
		}

		.wsn {
			white-space: nowrap
		}

		.w48 {
			width: 48%;
		}

		.w200 {
			width: 200rpx;
		}

		.btnSub {
			padding-bottom: env(safe-area-inset-bottom);
			width: 100vw;
			height: 98rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			z-index: 2;

			.btn::after {
				border: none;
			}

			.btn {
				width: 600rpx;
				height: 62rpx;
				background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>